@font-face {
    font-family: Apache;
    src: url(AldotheApache.ttf);
}

body{
	background-color: #91B5BE;
}

@media (orientation: portrait){
	
	#Header {
		width:100%;
		height:10%;
		position:absolute;
		top:0;
		left:0;
		background-color:#255C69;
		z-index:3;
	}
	
	#Header img{
		height:100%;
	}
	
	#Header #settings {
	    display: inline-block;
		float: right;
		height: 100%;
	}
		
	#Header #settings img {
		float: right;
		height: 60%;
		top: 20%;
		position: relative;
	}	
		
	#Content {
		width:100%;
		height:90%;
		position:absolute;
		top:10%;
		left:0;
		overflow:auto;
		opacity:0;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
	}
	
	#Content #login{
		width: 80%;
		height: 40%;
		position: relative;
		top: 25%;
		margin-left: auto;
		margin-right: auto;
		background-color: #255C69;
		border-radius: 4px;
	}
	
	#Content #login form {
		width:100%;
		height:100%;
	}
	
	#Content #login form #submit {
		width: 100%;
		height: 40%;
		margin-left: auto;
		margin-right: auto;
		position: absolute;
		bottom:0;
	}
	
	#Content #login form #submit img{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 60%;
	}
	
	#Content #login form #submit:active{
		background-color: rgb(85, 118, 125);
	}
	
	#Content #login form #form {
		width: 90%;
		padding-top: 5%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		font-family: Apache;
		color: white;
		font-style: italic;
	}
	
	#Content #login form #contact{
		text-align: center;
		font-family: Apache;
		color: white;
		font-size: 4vh;
		font-style: italic;
	}
	
	#Content #login form #form input{
		width: 98%;
		height: 30px;
		margin-left:1%;
		margin-right:1%;
		position: relative;
	}
	
	#Content #login form #form  img{
		height:10%;
	}
}

@media (orientation: landscape){
	
	#Header {
		width:100%;
		height:12.5%;
		position:fixed;
		top:0;
		left:0;
		background-color:#255C69;
		z-index:3;
	}
	
	#Header img{
		height:100%;
	}
	
	#Header #settings {
	    display: inline-block;
		float: right;
		height: 100%;
	}
	
	#Header #settings img {
		float: right;
		height: 60%;
		top: 20%;
		position: relative;
	}	
		
	#Content {
		width:100%;
		height:87.5%;
		position:absolute;
		top:12.5%;
		left:0;
		overflow:auto;
		opacity:0;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
	}
	
	#Content #login{
		width: 80%;
		height: 70%;
		position: relative;
		top: 15%;
		margin-left: auto;
		margin-right: auto;
		background-color: #255C69;
		border-radius: 4px;
	}
	
	#Content #login form {
		width:100%;
		height:100%;
	}
	
	#Content #login form #submit {
		width: 100%;
		height: 30%;
		margin-left: auto;
		margin-right: auto;
		position: absolute;
		bottom:0;
	}
	
	#Content #login form #submit img{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 80%;
	}
	
	#Content #login form #submit:active{
		background-color: rgb(85, 118, 125);
	}
	
	#Content #login form #form {
		width: 90%;
		padding-top: 5%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		font-family: Apache;
		color: white;
		font-style: italic;
	}
	
	#Content #login form #contact{
		text-align: center;
		font-family: Apache;
		color: white;
		font-size: 4vh;
		font-style: italic;
	}
	
	#Content #login form #form input{
		width: 98%;
		height: 30px;
		margin-left:1%;
		margin-right:1%;
		position: relative;
	}
	
	#Content #login form #form  img{
		height:10%;
	}
}